<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>任务工时</span>
                </h3>
                <span class="m-section__sub">
                    任务工时的文本头信息
                </span>
            </div>
            <div class="col text-right mt-3 mt-md-0">
                <div class="btn-group dropdown" dropdown container="body">
                    <button dropdownToggle class="btn btn-outline-success dropdown-toggle" style="margin-right: 10px;">
                        <i class="fa fa-file-excel-o"></i>
                        Excel操作
                    </button>
                    <div class="dropdown-menu" *dropdownMenu>
                        <a class="dropdown-item" href="javascript:;" (click)="exportToExcel()">导出所有数据</a>
                    </div>
                </div>
                <!-- *ngIf="isGrantedAny('')" -->
                <button (click)="createProcModal.show()" class="btn btn-primary blue">
                    <i class="fa fa-plus"></i> 新增
                </button>
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="tabbable-line">
                    <form class="horizontal-form" autocomplete="off">
                        <div class="m-form m-form--label-align-right">
                            <div class="row align-items-center m--margin-bottom-10">
                                <div class="col-xl-12">
                                    <div class="form-group m-form__group align-items-center">
                                        <div class="input-group">
                                                <span
                                                style="
                                                    line-height: 36px;
                                                    margin-left: 20px;
                                                "
                                                >选择时间：</span
                                            >
                                                <date-range-picker
                                                style="width:250px;margin-right:20px"
                                                id="StartEndRange"
                                                [(startDate)]="startDate"
                                                [(endDate)]="endDate"
                                                ></date-range-picker>
                                            <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"
                                                [placeholder]="
                                                    l('SearchWithThreeDot')
                                                "
                                                type="text" />
                                            <span class="input-group-btn">
                                                <button (click)="getWorking()" class="btn btn-primary" type="submit">
                                                    <i class="flaticon-search-1" [attr.aria-label]="
                                                            l('Search')
                                                        "></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                               
                            </div>
                            <div class="row m--margin-bottom-10" style="padding: 0 20px;" [hidden]="!advancedFiltersAreShown">
                                <!-- <div class="form-group col-md-6">
                                    <label for="StartEndRange" class="control-label">日期范围</label>
                                    <date-range-picker
                          id="StartEndRange"
                          [(startDate)]="startDate"
                          [(endDate)]="endDate"
                        ></date-range-picker>
                                </div> -->
                                <div class="form-group col-md-6">
                                    <label for="StartEndRange" class="control-label">总定额</label>
                                    <input class="form-control" style="width: 80%;" type="number" name='zde' [(ngModel)]="zde" />
                                </div>
                            </div>
                            <div class="row margin-bottom-10" *ngIf="advancedFiltersAreShown">
                                <div class="col-sm-12 text-right">
                                    <button class="btn btn-primary" (click)="getWorking()">
                                        <i class="fa fa-refresh"></i>
                                        {{ l('Refresh') }}
                                    </button>
                                    <button class="btn btn-metal" (click)="clean()">
                                        <i class="fa fa-refresh"></i>
                                        清空
                                    </button>
                                </div>
                            </div>
                            <div class="row margin-bottom-10">
                                <div class="col-sm-12">
                                    <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="
                                            advancedFiltersAreShown = !advancedFiltersAreShown
                                        ">
                                        <i class="fa fa-angle-down"></i>
                                        {{ l('ShowAdvancedFilters') }}</span>
                                    <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="
                                            advancedFiltersAreShown = !advancedFiltersAreShown
                                        ">
                                        <i class="fa fa-angle-up"></i>
                                        {{ l('HideAdvancedFilters') }}</span>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="row align-items-center" style="padding: 0 14px;">
                        <!--<Primeng-TurboTable-Start>-->
                        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                            <p-table #dataTable (onLazyLoad)="getWorking($event)" [value]="primengTableHelper.records"
                                rows="{{
                                    primengTableHelper.defaultRecordsCountPerPage
                                }}"
                                [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="
                                    primengTableHelper.resizableColumns
                                "
                                dataKey="id">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 30px;"></th>
                                        <th style="width: 110px;"></th>
                                        <th style="width: 170px;">任务号</th>
                                        <th style="width: 120px;">任务名称</th>
                                        <th style="width: 120px;">图号</th>
                                        <th style="width: 100px;">投产数量</th>
                                        <th style="width: 120px;">主制班组</th>
                                        <th style="width: 120px;">质控卡</th>
                                        <th style="width: 120px;">工序名称</th>
                                        <th style="width: 120px;">总定额</th>
                                        <th style="width: 120px;">工序工时</th>
                                        <th style="width: 120px;">分配工时</th>
                                        <th style="width: 120px;">记录时间</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit" let-expanded="expanded">
                                    <tr>
                                        <td style="width: 30px;">
                                            <a href="#" [pRowToggler]="record">
                                                <i [ngClass]="
                                                        expanded
                                                            ? 'pi pi-chevron-down'
                                                            : 'pi pi-chevron-right'
                                                    "></i>
                                            </a>
                                        </td>
                                        <td style="width: 110px;">
                                            <div class="btn-group dropdown" dropdown container="body" >
                                                <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                    <i class="fa fa-cog"></i><span class="caret"></span>
                                                    操作
                                                </button>
                                                <ul class="dropdown-menu" *dropdownMenu>
                                                    <li>
                                                        <a (click)="
                                                                createOrEditTaskworkingModal.show(
                                                                    record,
                                                                    $event
                                                                )
                                                            ">编辑分配工时</a>
                                                    </li>
                                                    <li >
                                                        <a (click)="
                                                                createProcModal.show(
                                                                    record.id,
                                                                    $event
                                                                )
                                                            ">编辑</a>
                                                    </li>
                                                    <li >
                                                        <a (click)="
                                                                deleteModel(
                                                                    record.id
                                                                )
                                                            ">删除</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                        <td style="width: 170px;">
                                            {{ record.taskCode }}
                                        </td>
                                        <td style="width: 120px;">
                                            {{ record.taskName }}
                                        </td>
                                        <td style="width: 120px;">
                                            {{ record.drawingNum }}
                                        </td>
                                        <td style="width: 100px;">
                                            {{ record.amount }}
                                        </td>
                                        <td style="width: 120px;">
                                            {{ record.orgName }}
                                        </td>
                                        <td style="width: 120px;">
                                            {{ record.zhiKongKaCode }}
                                        </td>
                                        <td style="width: 120px;">
                                            {{ record.nodeName }}
                                        </td>
                                        <td style="width: 120px;">
                                            {{ record.totalQuotaWorkingTime }}
                                        </td>
                                        <td style="width: 120px;">
                                            {{ record.totalProcWorkingTime }}
                                        </td>
                                        <td style="width: 120px;">
                                            {{ record.userWorkingTime }}
                                        </td>
                                        <td style="width: 120px;">
                                            {{
                                            record.creationTime
                                            | momentFormat: 'YYYY-MM-DD'
                                            }}
                                        </td>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="rowexpansion" let-record>
                                    <div class="ui-grid ui-grid-responsive ui-fluid" style="margin: -0.75em; padding: 20px;">
                                        <!-- <div class="ui-grid-row"> -->
                                        <tr>
                                            <td [attr.colspan]="5">
                                                <p-table class="detailTable" [value]="
                                                        record.detailWorkingTimes
                                                    "
                                                    [paginator]="false" [lazy]="true" [scrollable]="true">
                                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="
                                                                    width: 300px;
                                                                ">
                                                人员姓名
                                            </th>
                                            <th style="
                                                                    width: 300px;
                                                                ">
                                                所在班组
                                            </th>
                                            <th style="
                                                                    width: 300px;
                                                                ">
                                                分配工时
                                            </th>
                                            <th style="
                                                                    width: 300px;
                                                                ">
                                                所占比例
                                            </th>
                                            <th style="
                                                                    width: 300px;
                                                                ">
                                                记录时间
                                            </th>
                                        </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowData>
                                    <tr [pSelectableRow]="
                                                                rowData
                                                            ">
                                        <td style="
                                                                    width: 300px;
                                                                ">
                                            {{
                                            rowData.userName
                                            }}
                                        </td>
                                        <td style="
                                                                    width: 300px;
                                                                ">
                                            {{
                                            rowData.orgDisplayName
                                            }}
                                        </td>
                                        <td style="
                                                                    width: 300px;
                                                                ">
                                            {{
                                            rowData.personWorkingTime
                                            }}
                                        </td>
                                        <td style="
                                                                    width: 300px;
                                                                ">
                                            {{
                                            (rowData.personWorkingTime /
                                            record.totalProcWorkingTime) *
                                            100
                                            }}
                                        </td>
                                        <td style="width: 300px;">
                                            {{
                                            rowData.creationTime
                                            | momentFormat: 'YYYY-MM-DD'
                                            }}
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            </td>
                            </tr>
                            <!-- </div> -->
                        </div>
                        </ng-template>
                        </p-table>
                        <div class="primeng-no-data" *ngIf="
                                    primengTableHelper.totalRecordsCount == 0
                                ">
                            {{ l('NoData') }}
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator rows="{{
                                        primengTableHelper.defaultRecordsCountPerPage
                                    }}"
                                #paginator (onPageChange)="getWorking($event)" [totalRecords]="
                                        primengTableHelper.totalRecordsCount
                                    "
                                [rowsPerPageOptions]="
                                        primengTableHelper.predefinedRecordsCountPerPage
                                    ">
                            </p-paginator>
                            <span class="total-records-count">
                                共计：{{
                                primengTableHelper.totalRecordsCount
                                }}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-TurboTable-End>-->
                </div>
            </div>
        </div>
    </div>
</div>
<createOrEditTaskworkingModal #createOrEditTaskworkingModal (modalSave)="getWorking($event)">
</createOrEditTaskworkingModal>
<createProcModal #createProcModal (modalSave)="getWorking($event)">
</createProcModal>
</div>